<template>
    <div class="main">
         <!-- <h1> Main组件 </h1> -->
        <!-- 底部选项卡 -->
         <!-- <van-tabbar v-model="tabbarIndex" active-color ="#2a2a2a" inactive-color="#aeaeae" route> -->

            <!-- <van-tabbar-item badge="3"> -->
              <!-- 组件内部会把变量抛给组件的 -->
                <!-- <van-tabbar-item v-for="(item,index) in tabbarDatatwo" :key="index" :to="{name: item.name}" :dot="item.dot" > 
                    <span>{{item.title}}</span> -->
                    <!-- 插槽作用域 它就是个对象 -->
                    <!-- <template #icon="a">
                    <img :src="a.active ? item.activeIcon : item.inactiveIcon" />
                    </template>
                </van-tabbar-item> -->

        <!-- <van-tabbar-item icon="search">标签</van-tabbar-item> -->
        <!-- <van-tabbar-item icon="setting-o">标签</van-tabbar-item> -->
        <!-- </van-tabbar> -->

       
         <div >

          <!-- Main组件的二级路由插座 -->
          <router-view></router-view>
          

        </div>
         <!-- <Tabbar :tabbar-data = "tabbarData"> </Tabbar> -->

         <van-tabbar route   v-model="active" active-color="#ff3a3a" inactive-color="#000" z-index="0"  >

            <van-tabbar-item  :to="{name :item.name}" 
            :name="item.name" :icon="item.icon" v-for="(item,index) in tabbarData" 
            :key=index :class="{addactive : addactive == item.name}" 
            @click="selected(item.name)" @change="back" >{{item.title}}</van-tabbar-item>
          
        </van-tabbar>

    </div>
</template>

<script>
    //导入Tabbar.vue文件
    // import Tabbar from '../components/Tabbar.vue'
import FooterMusicVue from "../components/item/FooterMusic.vue";

    import { mapMutations } from 'vuex';
    export default {
        name:"Main",
      
        comments:{
          FooterMusicVue,
                 
        },
    //    main路由名称 ,你要接受 把路由名称发过来直接跳转
        data(){
           return {
            productDataact:[],
       
             tabIndex:0, 

            active:"Find",
            //在data中定义即将渲染的数据，及active
            tabbarData:[
                {
                    title:"发现",
                    icon:"music-o",
                    name:"Find",       
                },
                {
                    title:"歌手",
                    icon:"smile-o",
                    name:"Boke",
                },
                {
                    title:"我的",
                    icon:"user-circle-o",
                    name:"My" ,
                },
                // {
                //     title:"热歌榜",
                //     icon:"friends-o",
                //     name:"Guanzhu",
                // },
                // {
                //     title:"搜索",
                //     icon:"hot-o",
                //     name:"Yuncun",
                // },
            ],
            //小圆点
            addactive:"",
            
            tabbarIndex:0,

           };
        },

    created(){
        this.setIsMain(true);
    },

        // created(){
        // this.GetRecommend();
        //  // this.orderData
        // },

    //     methods: {    
    //       GetRecommend(){
    //       this.axios({
    //       method: "get",
    //       url: "https://apis.netstart.cn/douguo/init.json",
    //     //get请求参数写在params中
     
    //   })
    //     .then((result) => {
    //     //   console.log("result==>", result);
    //       this.productDataact = result.data;
    //     //   this.productDataaend = result.data.data;
    //     //   console.log(" this.productDataact==>", this.productDataact);
    //     })
    //     .catch((err) => {
    //       console.log("err==>", err); //用来捕获错误

    //     });
    // },


    //       toggleTabbar(name){
            
    //         this.$router.push({ name })
    //       }  
    //     },
    methods:{
        
        // ...mapMutations(['setIsMain']),
        ...mapMutations(['backplay','play','setIsMain','duration','updateDuration','gettheLyricone','updateCurrentTime','updateIsbtnShow','updateDetailShow']),
  
        back:function() {
      // this.$refs.audio.paused
      // console.log("输出的$refs" ,$refs);
      let isback = true
      if (isback) {
        this.$children[0].$children[3].$parent.backplay()
        console.log("this.$childrens==>",this.$children);
       
      }
    //   this.$router.back();
    },
      selected(name){
        this.addactive = name;
        let isback = true
      if (isback) {
        // this.$children[0].$children[3].$parent.backplay()
        console.log("this.$childrens==>",this.$children[0].$children);
       
      }
      },
      
     
    }
        
    }
</script>

<style lang="less" scoped>
   //定义高亮的标签类名
   .addactive::after{  
    position: relative; 
    background-color: #fd7522;
    border-radius: 50%;   
   }
   .main-box{
    padding-bottom: 100px;
   }
  

   
</style>